<template>
	<view>
		<u-navbar back-text="详情" :borderBottom="false" :background="background" :back-text-style="{'color':'#fff'}"
			backIconColor="#fff"></u-navbar>
		<view>
			<u-image src="/static/pic.jpg" height="550" borderRadius="0"></u-image>
			<view class="home">
				<view class="u-flex u-row-between">
					<view class="title-blod">老北京香饽饽</view>
					<view>
						<u-icon name="heart" color="#6BC362" size="40" label="收藏"></u-icon>
					</view>
				</view>
				<view class="u-m-t-30 u-flex u-row-between">
					<view class="times">烹饪时间：10分钟</view>
					<view class="times">用餐人数：2人</view>
				</view>
				<view class="u-m-t-20">
					<u-tag v-for="(item,index) in 10" :key="index" text="小吃" mode="dark" class="tag"
						type="success"></u-tag>
				</view>
				<view class="u-m-t-10">
					<view class="title-blod">用料</view>
					<view class="u-flex u-row-between u-m-t-10" v-for="(item,index) in 2" :key="index">
						<view>面粉</view>
						<view>100g<text class="texts"
								:class="index/1==0 ? 'bgFA' : 'bg6B'">{{index/1==0 ? '主料' : '辅料'}}</text></view>
					</view>
				</view>
				<view class="u-m-t-30">
					<view class="title-blod">步骤</view>
					<view v-for="(item,index) in 2" :key="index" class="u-m-t-20">
						<view class="flex-process">
							<view>{{index+1}}.准备好所有食材</view>
						</view>
						<u-image src="/static/pic.jpg" height="350" border-radius="0"></u-image>
					</view>
				</view>
				<view class="u-m-t-30">
					<view class="title-blod u-m-b-10">介绍</view>
					<view>真好吃</view>
				</view>
				<u-gap height="30"></u-gap>
			</view>
		</view>
		<!-- top s -->
		<u-back-top :scrollTop="scrollTop" mode="circle" bottom="200" right="40" top="600" :icon="icon"
			:icon-style="iconStyle" :tips="tips" :custom-style="customStyle">
		</u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				detail: {},
				scrollTop: 0,
				icon: 'arrow-up',
				iconStyle: {
					color: '#ffffff',
					fontSize: '30rpx'
				},
				tips: '顶部',
				customStyle: {
					backgroundColor: '#6BC362',
					color: '#ffffff'
				},
				
			}
		},
		onLoad() {
			
		},
		methods: {
			// top
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
	
		}
	}
</script>

<style lang="scss" scoped>
	
	.tag {
		margin: 0 20rpx 20rpx 0;
		display: inline-block;
	}

	.bgFA {
		background: #FFAA3E;
	}

	.texts {
		margin-left: 20px;
		width: 40rpx;
		height: 40rpx;
		color: #FFFFFF;
		border-radius: 24rpx;
		font-size: 26rpx;
		padding: 0 20rpx;
	}

	.textp {
		color: #FFFFFF;
		border-radius: 55rpx;
		font-size: 26rpx;
		margin-right: 10rpx;
		padding: 0 10rpx;
		background-image: linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63));
	}

	.times {
		width: 49%;
		padding: 20rpx 0;
		background-image: linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63));
		text-align: center;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.num {
		z-index: 10;
		left: 14rpx;
		font-size: 24rpx;
	}

	.flex-process {
		display: flex;
	}
</style>
